<template>
  <div>
<!--    http://upload.qiniup.com-->
    <el-form  label-width="100px" class="form">
      <el-form-item label="图片">
        <el-upload
                class="avatar-uploader"
                action="http://upload.qiniup.com"
                :on-success="uploadSuccess"
                :on-change="onChange"
                :before-upload="beforeUpload"
                :data="postData"
                :file-list="fileList"
                :show-file-list="false">
            <img v-if="localUrl" :src="localUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="form.amount"></el-input>
      </el-form-item>
      <el-button
              size="middle"
              type="primary"
              class="upload"
              @click="submit"
             >上传图片</el-button>
      <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->

    </el-form>
  </div>
</template>

<script>
  import { v4 as uuidv4 } from 'uuid';
  export default {
    name: "Upload",
    data(){
      return{
        fileList: [],
        postData:{
          key:'',
          token : ''
        },
        form:{
          sender:"",
          amount:"",
          img_url:"",
        },
        localUrl :""
      }
    },
    created() {
       //生成唯一标识uuid
      this.postData.key = uuidv4()
      console.log( this.form.key)
      //获取token
      this.$http.get('/api/getToken?key='+this.postData.key).then(res => {
        if(res.status === 200){
          this.postData.token = res.data.data
          console.log(this.postData.token)
      }
    }).catch(err =>{
        console.log(err)
      })
    },
    methods:{
      beforeUpload(file){
        console.log(this.form)
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error("图片只能是 JPG/PNG 格式!");
          return false;
        }
        if (!isLt2M) {
          this.$message.error("图片大小不能超过 2MB!");
          return false;
        }
      },
      onChange(file,fileList){
        this.uploadImgToBase64(file.raw)
            .then(data => { this.localUrl = data.result })
        // console.log(file)
        // console.log(fileList)
      },
      uploadImgToBase64(file) {  //核心方法，将图片转成base64字符串形式
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = function() { // 图片转base64完成后返回reader对象
            resolve(reader)
          }
          reader.onerror = reject
        })
      },

      //图片上传到七牛云的成功回调，获取url传递给服务器
      uploadSuccess(file, fileList){
        // console.log(file)
        // console.log(fileList)
        this.form.img_url = "http://quj3ic5hl.hd-bkt.clouddn.com/"+file.key
      },

    //  上传到服务器

      submit(){
        this.form.sender = this.$store.getters.getSender
        // console.log(this.form)
        this.$http.post("/api/add/image",this.form)
          .then(res => {
            console.log("上传成功")
          })
      }
    }
  }
</script>

<style scoped>
  .form{
    width: 400px;
    height: 300px;
    margin: 80px;
    font-size: 20px;
    text-align: center;
  }
  .avatar-uploader{
    width: 200px;
    height: 200px;
    border: 1px solid #a19898;
    /*background-color: red;*/
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }

</style>